import React from 'react';
import {TABLE} from '../constants';
import PropTypes from 'prop-types';
import {Spin, Card, Table} from 'antd';
import {injectIntl, formatMessage} from './intl';
import DataSet from '@antv/data-set';
import {Chart, Tooltip, Legend, Facet} from 'bizcharts';
export class TablePanelRate extends React.PureComponent {
    columns = columns => [{
        title: formatMessage({
            id: 'tablePanel.column.month',
            defaultMessage: '日期'
        }),
        dataIndex: 'month'
    }, {
        title: formatMessage({
            id: 'tablePanel.column.n1',
            defaultMessage: '12个月'
        }),
        dataIndex: columns ? 'sluggishAmountN1' : 'sluggishVarietyN1',
    }, {
        title: formatMessage({
            id: 'tablePanel.column.n2',
            defaultMessage: '24个月'
        }),
        dataIndex: columns ? 'sluggishAmountN2' : 'sluggishVarietyN2',
    }, {
        title: formatMessage({
            id: 'tablePanel.column.n3',
            defaultMessage: '36个月'
        }),
        dataIndex: columns ? 'sluggishAmountN3' : 'sluggishVarietyN3',
    }, {
        title: formatMessage({
            id: 'tablePanel.column.n4',
            defaultMessage: '超储'
        }),
        dataIndex: columns ? 'stockOverAmount' : 'stockOverVariety',
    }, {
        title: formatMessage({
            id: 'tablePanel.column.total',
            defaultMessage: '合计'
        }),
        dataIndex: 'total',
    }];
    chartsContent = (list, columns) => {
        const datalist = [{
            area: formatMessage({
                id: 'tablePanel.column.n1',
                defaultMessage: '12个月'
            }),
            profit: (columns ? list.sluggishAmountN1 : list.sluggishVarietyN1) / list.total
        }, {
            area: formatMessage({
                id: 'tablePanel.column.n2',
                defaultMessage: '24个月'
            }),
            profit: (columns ? list.sluggishAmountN2 : list.sluggishVarietyN2) / list.total
        }, {
            area: formatMessage({
                id: 'tablePanel.column.n3',
                defaultMessage: '36个月'
            }),
            profit: (columns ? list.sluggishAmountN3 : list.sluggishVarietyN3) / list.total
        }, {
            area: formatMessage({
                id: 'tablePanel.column.n4',
                defaultMessage: '超储'
            }),
            profit: (columns ? list.stockOverAmount : list.stockOverVariety) / list.total
        }];
        return (<Chart
            height={400}
            data={datalist} padding={'auto'} forceFit>
            <Tooltip showTitle={false} />
            <Legend/>
            <Facet
                type="rect"
                padding={50}
                colTitle={{
                    offsetY: -30,
                    style: {
                        fontSize: 18,
                        textAlign: 'center',
                        fill: '#999'
                    }
                }}
                eachView={(view, facet) => {
                    const data = facet.data;
                    const dv = new DataSet.DataView();
                    dv.source(data).transform({
                        type: 'percent',
                        field: 'profit',
                        dimension: 'area',
                        as: 'percent'
                    });
                    view.source(dv, {
                        percent: {
                            formatter: val => `${(val * 100).toFixed(2)}%`
                        }
                    });
                    view.coord('theta', {
                        innerRadius: 0.35
                    });
                    view
                        .intervalStack()
                        .position('percent')
                        .color('area', columns
                            ? ['#92D050', '#F79646', 'red', '#B7DEE8'] 
                            : ['#4F81BD', '#C0504D', '#9BBB59', '#8064A2'])
                        .label('percent', {
                            offset: -8
                        })
                        .style({
                            lineWidth: 1,
                        });
                }}/>
        </Chart>);
    }
    render() {
        const {data, loading} = this.props;
        const datagroup = [];
        data.forEach(item => {
            datagroup.push(<div key={item.id}>
                <Card.Grid
                    style={{
                        width: '48%',
                        marginBottom: 15}}>
                    <Card
                        bodyStyle={{padding: 0}}
                        bordered={false}
                        loading={loading}>
                        <Card.Meta
                            title={`${item.country}--${formatMessage({
                                id: 'tablePanelRate.sluggishVariety',
                                defaultMessage: '呆滞品种'
                            })}`}
                            description={<div>
                                <Table
                                    className="white-space-nowrap"
                                    rowKey="id"
                                    dataSource={[item.sluggish]}
                                    columns={this.columns(true)}
                                    loading={loading}
                                    pagination={false}
                                    {...TABLE} />
                                {this.chartsContent(item.sluggish, true)}
                            </div>}/>
                    </Card>
                </Card.Grid>
                <Card.Grid
                    style={{
                        width: '48%',
                        float: 'right',
                        marginBottom: 15}}>
                    <Card
                        bodyStyle={{padding: 0}}
                        bordered={false}
                        loading={loading}>
                        <Card.Meta
                            title={`${item.country}--${formatMessage({
                                id: 'tablePanelRate.sluggishAmount',
                                defaultMessage: '呆滞金额'
                            })}`}
                            description={<div>
                                <Table
                                    className="white-space-nowrap"
                                    rowKey="id"
                                    dataSource={[item.variety]}
                                    columns={this.columns(false)}
                                    loading={loading}
                                    pagination={false}
                                    {...TABLE} />
                                {this.chartsContent(item.variety, false)}
                            </div>}/>
                    </Card>
                </Card.Grid>
            </div>);
        });
        return <Spin spinning={loading}>{datagroup}</Spin>;
    }
}

TablePanelRate.propTypes = {
    intl: PropTypes.object,
    loading: PropTypes.bool,
};

import {connect} from 'react-redux';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
const getData = selectorFactory(['page', 'domainData', 'listRate', 'data']);
const mapStateToProps = state => ({
    data: getData(state),
    loading: state.getIn(['page', 'domainData', 'listRate', 'isFetching'])
});
export default connect(mapStateToProps, null)(injectIntl(TablePanelRate));
